<template>
	<div>
		<div class="shop-tab-content">
			<el-tabs v-model="activeTab">
				<el-tab-pane
					v-if="hasPermission('90870111')"
					label="商品价格配置"
					name="priceConfig"
				></el-tab-pane>
				<el-tab-pane
					v-if="hasPermission('90870116')"
					label="商品排序"
					name="productSort"
				></el-tab-pane>
				<el-tab-pane
					v-if="hasPermission('90870118')"
					label="商城开关"
					name="mallSwitch"
				></el-tab-pane>
			</el-tabs>
		</div>

		<PriceConfig
			v-if="activeTab === 'priceConfig' && hasPermission('90870111')"
		/>
		<ProductSort
			v-if="activeTab === 'productSort' && hasPermission('90870116')"
		/>
		<MallSwitch
			v-if="activeTab === 'mallSwitch' && hasPermission('90870118')"
		/>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import PriceConfig from './components/priceConfig'
import ProductSort from './components/productSort'
import MallSwitch from './components/mallSwitch'
export default {
	name: routerNames.shopProductConfig,
	components: {
		PriceConfig,
		ProductSort,
		MallSwitch
	},
	data() {
		return {
			activeTab: 'priceConfig'
		}
	},
	created() {
		if (this.hasPermission('90870111')) {
			this.activeTab = 'priceConfig'
		} else if (this.hasPermission('90870116')) {
			this.activeTab = 'productSort'
		} else if (this.hasPermission('90870118')) {
			this.activeTab = 'mallSwitch'
		}
	}
}
</script>
<style lang="scss" scoped>
.shop-tab-content {
	margin: 5px 16px 0px 16px;
}
.text-click {
	color: #409eff;
	cursor: pointer;
}
</style>
